<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
<h3>v-计算属性</h3>
{{message}}
<!-- 将message 进行翻转 --><br><br>
{{message.split('').reverse().join('')}} 直接进行翻转
<!-- 使用计算属性 将message 进行翻转 --><br><br>
{{reverseMessage}} 使用计算属性进行翻转
<!-- 使用自定义的方法 将message 进行翻转 --><br><br>
{{reverseMessageFun()}} 使用自定义方法进行翻转
<!-- 使用过滤器 将message 进行翻转 --><br><br>
{{message | reverseMessageFilter}} 使用过滤器进行翻转
</div>
<script type="text/javascript">
var myApp = new Vue({
	el:"#myApp",
	data:{ 
		message:'hello world!'
	},
	computed:{
		reverseMessage:function(){
			return this.message.split('').reverse().join('');
		}
	},
	methods:{
		reverseMessageFun:function(){
			return this.message.split('').reverse().join('');
		}
	},	
	filters:{
		reverseMessageFilter:function(res){
			return res.split('').reverse().join('');
		}
	}
});
</script>
</body>
</html>